<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>详情</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">

</head>
<body>
<div class="page-group">
    <div id="page-details" class="page page-current">
        <style>
            .swiper-slide img{
                width: 100%;
            }
            .swiper-container {
                padding-bottom: 0px;
            }
            .card {
                width: 100%;
                margin: 0px;
            }
            #title{
                font-size: 0.85rem;
                font-weight: bold;
                line-height: 1rem;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
                margin-bottom: 0.5rem;
            }
            #tool a{
                color: white;
                font-size: 0.74rem;
            }
            .price-gray{
                font-size: .65rem;
            }
            .price-red{
                font-size: .75rem;
            }
            .toast-bottom{

            }
            .round-back{
               /* background: #a2a2a2e8;*/
                background-color: rgb(0,0,0);
                filter:alpha(Opacity=40);-moz-opacity:0.4;opacity: 0.4;
                height: 2rem;
                width: 2rem;
                border-radius: 1rem;
                line-height: 2rem;
                text-align: center;
                position: fixed;
                top: 1rem;
                left: 1rem;
                z-index: 100;
            }
        </style>
        <div class="content">
            <div class="round-back">
                <a class="back">
                    <span class="icon icon-left" style="color:white;font-weight: bold;"></span>
                </a>
            </div>
            <!-- Slider -->
            <div class="swiper-container" data-space-between="10">
                <div class="swiper-wrapper" id="imageSwiper" style="height: 18rem;">
                    <!-- 图片幻灯片 -->

                </div>
                <div class="swiper-pagination"></div>
            </div>
            <!-- card -->
            <div class="card" style="margin-top: 0px">
                <div class="card-header" id="priceHeader">
                    <div style="margin-left: unset">
                        <span id="ck" class="price-red" style="background-color: red;color: white;border-radius: 90px;display: inline-block;width: 3rem;text-align: center;">券后价</span>
                        <span id="cv" class="price-red" style="color: red;font-size: 0.95rem;font-weight:bold;padding-right: 0.5rem"> </span>
                        <span id="pk" class="price-gray">淘宝价:</span>
                        <span id="pv" class="price-gray"> </span>
                    </div>
                </div>
                <div class="card-content">
                    <div class="card-content-inner">
                        <div id="title" style="font-size: 0.8rem;margin-bottom: 0.5rem;">

                        </div>
                        <div class="row">
                            <div class="col-33">
                                <div>月销<span id="volume"> </span></div>
                            </div>
                            <div class="col-33">
                                <div style="text-align: center"><span id="address"> </span></div>
                            </div>
                            <div class="col-33">
                                <div style="text-align: right"><span id="couponAmount"> </span></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer" id="shop"> </div>
            </div>

            <div id="bottom" style="height: 2.5rem;width: 100%">
                <!-- 底部占位边距与工具栏相同，保证上面的内容显示完整 -->
            </div>
            <!-- 底部工具栏 -->
            <div class="content-padded" id="tool">
                <nav id="tool1" class="bar bar-tab" style="position: fixed;bottom:0px;z-index: 1" hidden>
                    <div class="row" style="margin-left: unset">
                        <div  style="background-image: linear-gradient(to right, #feb542 0%, #fd961f 100%);width: 25%;float: left">
                            <a class="tab-item external share-btn" href="javascript:void(0)" style="color: white"><span class="icon icon-share" style="font-size: 1rem;"></span>分享</a>
                        </div>
                        <div style="background-image: linear-gradient(to right, #ff8201 0%, #ff5100 100%);width: 37.5%;float: left">
                            <a id="tpwd" class="tab-item external" style="color: white">获取淘口令</a>
                        </div>
                        <div style="background-image: linear-gradient(to right, #ff5c63 0%, #ff2d2e 100%);width: 37.5%;float: left">
                            <a id="couponUrl" class="tab-item external" href="javascript:void(0)" style="color: white">去购买</a>
                        </div>
                    </div>
                </nav>
                <nav id="tool2" class="bar bar-tab" style="position: fixed;bottom:0px;z-index: 1" hidden>
                    <div class="row" style="margin-left: unset">
                        <div  style="background-image: linear-gradient(to right, #feb542 0%, #fd961f 100%);width: 25%;float: left">
                            <a class="tab-item external share-btn" href="javascript:void(0)" style="color: white"><span class="icon icon-share" style="font-size: 1rem;"></span>分享</a>
                        </div>
                        <div style="background-image: linear-gradient(to right, #ff5c63 0%, #ff2d2e 100%);width: 75%;float: left">
                            <a id="itemUrl" class="tab-item external" href="javascript:void(0)" style="color: white">去购买</a>
                        </div>
                    </div>
                </nav>

            </div>

        </div>

    </div>
    <!-- 分享弹窗 -->
    <div class="popup popup-about">
        <div class="content-block">

            <div class="item-input">
                <textarea id="shareContent" style="background: #e8e8e8;border-radius: 10px;width: 100%;height: 15rem;font-size: 0.8rem;padding: 0.4rem;border:0"></textarea>
            </div>
            <div class="content-block">
                <div class="row">
                    <div class="col-50"><a href="javascript:void(0)" class="button button-big button-fill button-danger close-popup">关闭</a></div>
                    <div class="col-50"><a href="javascript:void(0)" id="copyShare" class="button button-big button-fill button-success" data-clipboard-target="#shareContent">复制</a></div>
                </div>
            </div>
        </div>
    </div>

    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
    <script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/pageRoute.js"></script>
</div>

</body>
</html>